<template>
    <view class="lyGuessLike">
        <view class="title_cell">
            <image class="icon" src="../../static/images/bubble.png" />
            <text>猜你喜欢</text>
            <image class="icon" src="../../static/images/bubble.png" />
        </view>
    </view>
    
    <view class="goods_cell"> 
        <view class="goods" v-for="item of list" :key="item.id">
            <navigator
                url="/pages/"
                open-type="navigate"
                hover-class="navigator-hover"
                class="nav"
            > 
                <image class="cover-img" :src="item.picture" />
                <view class="goods_name"><text>{{ item.desc }}</text></view>
                <view class="price_cell">
                    <text  class="price_fuhao">￥</text>
                    <text>{{item.price}}</text>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref,defineProps } from 'vue';
import type {  guessLikeItem} from '@/types/home';
defineProps({
    list: {
        type: Array<guessLikeItem>,
        default: []
    }
})
</script>

<style scoped lang='scss'>
.lyGuessLike {
    margin-top: 20rpx;
    .title_cell {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        .icon {
            width: 12px;
            height: 12px;
            margin: 0 5px;
        }
    }
    
}
.goods_cell {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    padding-top: 10px;
    .goods {
        width: 50%;
        padding: 10rpx;
        box-sizing: border-box;
        .nav {
            padding: 20rpx;
            box-sizing: border-box;
            background-color: white;
            border-radius: 5rpx;
            box-shadow: 1rpx 1rpx 1rpx 4rpx #eeeeee, -1rpx -1rpx -1rpx 4rpx #eeeeee;
        }
       
    } 

    .goods_name {
        margin: 10rpx 0;
        font-size: 28rpx;
        line-height: 42rpx;
        height: 84rpx;
        color: #666666;
        overflow:hidden;//一定要写
        text-overflow: ellipsis;//超出省略号
        display:-webkit-box;//一定要写
        -webkit-line-clamp: 2;//控制行数
        -webkit-box-orient: vertical;//一定要写
    }
    .price_cell {
        vertical-align: bottom;
        color: #d68484;
        font-size: 32rpx;
    }
    .price_fuhao {
        font-size: 20rpx;
    }
}

.cover-img {
    width: 300rpx;
    height: 300rpx;
}
</style>
